<template>
	<view class="page1">
		<image src="./static/timerbg01.png" class="img_bg" />
    <view class="pd_lf--40">
      <uni-calendar class="calendar"  ref="calendar" :selected="selected"></uni-calendar>
    </view>

	</view>

</template>

<script>
import UniCalendar from "../admin/components/uni-calendar/uni-calendar";
export default {
  components: {UniCalendar},
  options: {
    styleIsolation:'shared'
  },
  data(){
    return{
      selected: [{
        info: '签到',
        date: '2024-02-21', // date为所需要打点的日期
        type: "abnormal" // abnormal显示为橙色点
      }, {
        date: '2024-01-19',
        type: "normal" // normal显示为蓝色点
      }, {
        date: '2024-02-19',
        type: "normal" // normal显示为蓝色点
      }],
    }
  }
}
</script>

<style lang="scss" scoped>
	page {
		background: transparent;
		/* height:100%; */
		vertical-align: middle;
		line-height: 1.45;
	}

	.pd_lf--40 {
	  width: 92vw;
    margin: 0 auto;
	}
	.img_bg {
		position: fixed;
		left: 0;
		top: 0;
		height: 617rpx;
		width: 100vw;
		z-index: -1;
	}
	.calendar{
		margin-top: 10vw; border-radius: 15px
	}
  /deep/.uni-calendar__content{
    border-radius: 8px;
  }
  /deep/.uni-calendar__weeks{
    .uni-calendar-item--isDay{
      border-radius: 50%;
      background: transparent;
      color: #0058ff;
    }
    .uni-calendar-item__weeks-box-item{
      width: 50px;
      height: 50px;
    }
    .uni-calendar-item--checked{
      border-radius: 50%;
    }
    .uni-calendar-item__weeks-box-circle {
      top: 0px;
      right: 0px;
      width: 100%;
      height: 100%;
      border-radius: 100%;
      background-color: #e43d33;
    }
    .uni-calendar-item__weeks-box-circle + .uni-calendar-item__weeks-box-text{
      color: #fff;
      z-index: 11;
    }
    .uni-calendar-item--extra{
      color: #fff;
    }
  }
</style>
